<template>
	<view style="background-color: #fff; padding-bottom: 20px;">
		<view class="header">
			<image src="https://zhyl.setupgx.cn/attachment/app/index/header-bg.png"></image>
			<view class="header-logo">
				澄迈县妇幼保健院
			</view>
			<view class="header-user">
				<view v-if="!currentUserCard.names">您尚未建档，请先进行【<text style="color: #41C177;"
						@click="goToPage('/pagesB/healthCard/users', true)">在线建档</text>】</view>
				<image v-if="currentUserCard.names" src="https://zhyl.setupgx.cn/attachment/app/index/head-portrait.png"></image>
				<p v-if="currentUserCard.names" class="card-name">{{currentUserCard.names}}({{currentUserCard.numcard}})
				</p>
				<button v-if="currentUserCard.names" class="qrcode-btn" size="mini"
					@click="showScSelectPopup()">二维码</button>
			</view>
			<u-popup :show="myScSelectPopupVisible" @close="myScSelectPopupVisible = false">
				<view>
					<u-cell-group>
						<u-cell center title="档案号" @click="openMyQR()">
							<u-icon slot="right-icon" name="arrow-right"></u-icon>
						</u-cell>
						<u-cell center title="电子健康卡" @click="showJianKangKaSC()">
							<u-icon slot="right-icon" name="arrow-right"></u-icon>
						</u-cell>
					</u-cell-group>
				</view>
			</u-popup>
		</view>
		<view class="uni-padding-wrap uni-common-mt content">

			<uni-section title="常用功能" type="line">
				<view class="row-body">
					<uni-row :gutter="10" :width="nvueWidth">
						<uni-col :span="12">
							<div class="card-col" style="height: 185px;"
								@click="goToPage('/pagesB/onlineRegistration/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/yygh-bg.png"></image>
								<view class="card-body">
									<view style="padding: 5px;">
										<p>预约挂号</p>
										<p style="font-size: 0.7rem;">线上便捷预约挂号</p>
										<p
											style="background-color: #fff; font-size: .6rem; border-radius: 18px; padding: 0px 10px; color: #41C277; display: inline-block; margin-top: 15px;">
											立即预约
										</p>
									</view>
								</view>
							</div>
						</uni-col>
						<uni-col :span="12">
							<div class="card-col mzjf" style="height: 90px;" @click="goToPage('/pagesB/pay/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/mzjf-bg.png"></image>
								<view class="card-body">
									<view style="padding: 5px;">
										<p>门诊缴费</p>
										<p class="subheading">点击进入门诊缴费</p>
									</view>
								</view>
							</div>
						</uni-col>
						<uni-col :span="6">
							<div class="card-col jcbg" style="height: 90px;"
								@click="goToPage('/pagesB/inspectionReport/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/jcbg-bg.png"></image>
								<view class="card-body">
									<p>检查报告</p>
								</view>
							</div>
						</uni-col>
						<uni-col :span="6">
							<div class="card-col zygl" style="height: 90px;" @click="showMessage()">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/zygl-bg.png"></image>
								<view class="card-body">
									<p>住院管理</p>
								</view>
							</div>
						</uni-col>

						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/fzjh-bg.png"></image>
								<p>分诊叫号</p>
							</div>
						</uni-col> -->
						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pages/healthExamination/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/jktj-bg.png"></image>
								<p>健康体检</p>
							</div>
						</uni-col> -->
						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pages/onlinePrescribe/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/zxkf-bg.png"></image>
								<p>在线开方</p>
							</div>
						</uni-col> -->
						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="showMessage()">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/ssap-bg.png"></image>
								<p>手术安排</p>
							</div>
						</uni-col> -->
						<!-- 原本叫在线问诊，已改成健康咨询 -->
						<uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pages/onlineInquiry/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/zxwz-bg.png"></image>
								<p>健康咨询</p>
							</div>
						</uni-col>
						<uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pagesB/intelligentInquiry/inquiryList')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/zndz-bg.png"></image>
								<p>智能导诊</p>
							</div>
						</uni-col>
						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="showMessage()">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/hzsf-bg.png"></image>
								<p>患者随访</p>
							</div>
						</uni-col> -->
						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pages/familyDoctor/teamList')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/jtys-bg.png"></image>
								<p>家庭医生</p>
							</div>
						</uni-col> -->
						<!-- <uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pages/pharmacy/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/yfpf-bg.png"></image>
								<p>药房配方</p>
							</div>
						</uni-col> -->
						<uni-col :span="6">
							<div class="card-col-2" @click="goToPage('/pagesB/feedback/index')">
								<image src="https://zhyl.setupgx.cn/attachment/app/index/hzsf-bg.png"></image>
								<p>意见反馈</p>
							</div>
						</uni-col>
					</uni-row>
				</view>
			</uni-section>

			<!-- <button @click="goToYiBao">跳到医保</button> -->

			<uni-section title="最新资讯" type="line">
				<view class="row-body">
					<view class="info-card" v-for="(info, index) in infos" :key="index"
						@click="goToPage('/pagesB/tabbar/portal/detail?id='+info.id)">
						<image :src="info.thumb" style="width: 50px; height: 50px;" />
						<view class="body">
							<p>{{info.title}}</p>
						</view>
					</view>
				</view>
			</uni-section>

			<u-modal :show="qrShow" :title="'我的二维码'" @confirm="qrShow = false">
				<view class="slot-content">
					<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
				</view>
			</u-modal>

			<!-- <uni-card padding="0" spacing="0">
				<template v-slot:cover>
					<view class="custom-cover">
						<image class="cover-image" mode="aspectFill" :src="require('@/static/images/new-info.jpg')"></image>
						<view class="cover-content">
							<text class="uni-subtitle uni-white">今日新闻热点</text>
						</view>
					</view>
				</template>
				<uni-list>
					<uni-list-item title="今日新闻" showArrow></uni-list-item>
					<uni-list-item title="今日新闻" showArrow></uni-list-item>
				</uni-list>
				
			</uni-card> -->

		</view>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	export default {
		data() {
			return {
				nvueWidth: 730,
				infos: [],
				currentUserCard: {
					names: ''
				},
				qrShow: false,
				qrcodeText: '',
				// 二维码尺寸
				qrcodeSize: 200,
				// 最终生成的二维码图片
				qrcodeSrc: '',
				myScSelectPopupVisible: false,
				title: '澄迈县妇幼保健院小程序',
				thumb: ''
			}
		},
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.title,
				imageUrl: this.thumb,
			}
		},
		onLoad() {
			this.loadInfos();
			this.getCurrentUserCardFromStorage()
			
		},
		onShow() {
			console.log('onShow')
			// this.$nextTick(() => {
			// 	this.currentUserCard = uni.getStorageSync('current_user_card')
			// });
		},
		methods: {
			getCurrentUserCardFromStorage() {
				uni.getStorage({
					key: 'current_user_card', // 根据自己的情况设置key值
					success: (res) => {
						const data = res.data; // 获取成功后将数据保存到变量中

						if (data && typeof data === 'object') {
							console.log(data)
							// 对获取到的数据进行相应操作，比如更新页面状态、重新渲染组件等

							// 注意：此处不建议直接修改this.$data中的属性，最好创建一个临时变量tempData来保存数据，然后再将其合并到this.$data中
							let tempData = Object.assign({}, this.$data);
							tempData.currentUserCard.names = data.names; // 根据实际情况更新数据
							tempData.currentUserCard.numcard = data.numcard

							// 更新完数据后再次执行render函数，确保界面及时显示
							this.$nextTick(() => {
								this.$forceUpdate();
							});
						} else {
							console.error('无法正确获取数据');
						}
					},

					fail: (err) => {
						console.error(`获取数据失败：${JSON.stringify(err)}`);
					}
				});
			},
			goToPage(url, flag) {
				let user_cardlist = uni.getStorageSync('user_cardlist')
				if (!flag) {
					if (user_cardlist.length <= 0) {
						uni.showToast({
							title: '您未建档，请先建档',
							icon: 'none'
						})
						return
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			showMessage() {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				})
			},
			loadInfos() {
				this.$app._get("entry/wxapp/zixun.zixunlists", {
					page: 0,
					pagesize: 10
				}, (res) => {
					console.log(res)
					this.infos = res
				})
			},
			showScSelectPopup() {
				this.myScSelectPopupVisible = true
			},
			openMyQR() {
				this.qrShow = true
				this.make()
				this.myScSelectPopupVisible = false
			},
			showJianKangKaSC() {
				let current_user_card = uni.getStorageSync('current_user_card')
				uni.navigateTo({
					url: 'plugin://healthCardPlugins/healthcode?hospitalId=37868&healthCardId=' + current_user_card
						.ecard_no
				})
			},
			make() {
				let currentUserCard = uni.getStorageSync('current_user_card')
				this.qrcodeText = currentUserCard.numcard

				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			goToYiBao() {
				wx.navigateToMiniProgram({
					appId: 'wx7ec43a6a6c80544d', //你要打开的小程序的appid
					path: 'pages/index/index',
					extraData: {
						foo: ''
					},
					envVersion: 'release',
					success(res) {
						// 已成功打开
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		height: 150px;
		position: relative;

		.header-logo {
			position: absolute;
			font-size: 1.1rem;
			font-weight: bold;
			top: 0px;
			left: 20px;
			color: #fff;
			z-index: 999;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.header-user {
			position: absolute;
			width: 80%;
			height: 100px;
			background-color: #fff;
			box-shadow: 0 0 10px #666;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 15px;
			line-height: 100px;
			display: flex;
			align-items: center;
			padding: 0px 15px 0px 15px;

			image {
				width: 50px;
				height: 50px;
				display: flex;
				background-color: #fff;
				border-radius: 50px;
			}

			.card-name {
				display: flex;
				flex: 1;
				margin-left: 10px;
			}

			.qrcode-btn {
				display: flex;
				justify-content: flex-end;
				background-color: #41C177;
				color: #fff;
				border: 0;
			}
		}
	}


	.content {}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.row-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 25rpx 0;
		overflow: hidden;
	}

	.card-col {
		height: 63px;
		border-radius: 8px;
		color: #fff;
		position: relative;
		margin-bottom: 5px;
		background-size: 100% 100%;
		background-position: center center;

		image {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.card-body {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			padding: 10px;
			box-sizing: border-box;

			p {
				line-height: 25px;
			}
		}

		&.mzjf {
			p:first-child {
				padding-left: 45px;
				padding-top: 10px;
				color: #775400;
				line-height: 20px;
			}

			p.subheading {
				font-size: 0.6rem;
				color: #D0AA50;
				padding-left: 45px;
				line-height: 20px;
			}
		}

		&.jcbg {
			text-align: center;

			p:first-child {
				padding-top: 45px;
				color: #775400;
			}
		}

		&.zygl {
			text-align: center;

			p:first-child {
				padding-top: 45px;
				color: #775400;
			}
		}
	}

	.card-col-2 {
		height: 80px;
		padding: 10px;
		box-sizing: border-box;
		color: #333333;
		position: relative;
		margin-bottom: 5px;
		text-align: center;

		image {
			width: 85%;
			height: 90%;
		}
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;

		image {
			width: 100%;
			height: 150px;
		}
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.info-card {
		display: flex;
		align-items: center;
		padding: 10px;
		border: 1px solid #EFEFF4;
		background-color: #EFEFF4;
		margin-bottom: 8px;
		border-radius: 6px;

		.thrum {
			display: flex;
		}

		.body {
			display: flex;
			font-size: 0.8rem;
			padding: 0px 5px 0px 5px;
		}
	}
</style>